{% extends 'base.html'%}
{% load static %}
{% block content %}
    {% for good in good_list %}
      <div class="modal fade" id="productView{{ good.id }}" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
          <div class="modal-content overflow-hidden border-0">
            <button class="btn-close p-4 position-absolute top-0 end-0 z-index-20 shadow-0" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="modal-body p-0">
              <div class="row align-items-stretch">
                <div class="col-lg-6 p-lg-0"><a class="glightbox product-view d-block h-100 bg-cover bg-center" style="background: url(/{{ good.goods_img }})" href="/{{ good.goods_img }}" data-gallery="gallery1" data-glightbox="Red digital smartwatch"></a><a class="glightbox d-none" href="#" data-gallery="gallery1" data-glightbox="Red digital smartwatch"></a><a class="glightbox d-none" href="#" data-gallery="gallery1" data-glightbox="Red digital smartwatch"></a></div>
                <div class="col-lg-6">
                  <div class="p-4 my-md-4">
                    <ul class="list-inline mb-2">
                      <li class="list-inline-item m-0"><i class="fas fa-star small text-warning"></i></li>
                      <li class="list-inline-item m-0 1"><i class="fas fa-star small text-warning"></i></li>
                      <li class="list-inline-item m-0 2"><i class="fas fa-star small text-warning"></i></li>
                      <li class="list-inline-item m-0 3"><i class="fas fa-star small text-warning"></i></li>
                      <li class="list-inline-item m-0 4"><i class="fas fa-star small text-warning"></i></li>
                    </ul>
                    {#店铺商品详情#}
                    <h2 class="h4">{{ good.goods_name }}</h2>
                    <p class="text-muted">${{ good.goods_price }}</p>
                    <p class="text-sm mb-4">{{ good.goods_detail }}</p>
                    <div class="row align-items-stretch mb-4 gx-0">
                      <div class="col-sm-7">
                        <div class="border d-flex align-items-center justify-content-between py-1 px-3"><span class="small text-uppercase text-gray mr-4 no-select">数量</span>
                          <div class="quantity">
                            <button class="dec-btn p-0"><i class="fas fa-caret-left"></i></button>
                            <input class="form-control border-0 shadow-0 p-0" type="text" value="1">
                            <button class="inc-btn p-0"><i class="fas fa-caret-right"></i></button>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-5"><a class="btn btn-dark btn-sm w-100 h-100 d-flex align-items-center justify-content-center px-0" href="/cart/zaddcart/{{ good.id }}">加入购物车</a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
      <div class="container">

        <section class="py-5">
          <div class="container p-0">
            <div class="row">
              <!-- SHOP SIDEBAR-->
              <div class="col-lg-3 order-2 order-lg-1">
                <h5 class="text-uppercase mb-4">类别</h5>
                <div class="py-2 px-4 bg-dark text-white mb-3"><strong class="small text-uppercase fw-bold">相机品牌</strong></div>

                  <ul class="list-unstyled small text-muted ps-lg-4 font-weight-normal">

                  {% for model in model_list %}
                  <li class="mb-2"><a class="reset-anchor" href="/shop/{{ model.id }}/"><strong class="small text-uppercase fw-bold" style="font-size: 20px">{{ model.model_name }}</strong></a></li>

                {% endfor %}
                  </ul>

              </div>
              <!-- SHOP LISTING-->
              <div class="col-lg-9 order-1 order-lg-2 mb-5 mb-lg-0">
                <div class="row mb-3 align-items-center">
                  <div class="col-lg-6 mb-2 mb-lg-0">
                    <p class="text-sm text-muted mb-0">正在显示28个中的1-4个结果</p>
                  </div>

                </div>
                <div class="row">
                  {% for good in good_list %}
                  <!-- PRODUCT-->
{#                      ！商品遍历！#}
                  <div class="col-lg-4 col-sm-6">
                    <div class="product text-center">
                      <div class="mb-3 position-relative">
                        <div class="badge text-white bg-"></div><a class="d-block" href="/detail/{{ good.id }}"><img class="img-fluid w-100" src="/{{ good.goods_img }}" alt="..."></a>
                        <div class="product-overlay">
                          <ul class="mb-0 list-inline">
                            <li class="list-inline-item m-0 p-0"><a class="btn btn-sm btn-dark" href="/cart/zaddcart/{{ good.id }}/">加入购物车</a></li>
                            <li class="list-inline-item mr-0"><a class="btn btn-sm btn-outline-dark" href="#productView{{ good.id }}" data-bs-toggle="modal"><i class="fas fa-expand"></i></a></li>
                          </ul>

                        </div>
                      </div>
                      <h6> <a class="reset-anchor" href="/detail/{{ good.id }}/">{{ good.goods_name }}</a></h6>
                      <p class="small text-muted">${{ good.goods_price }}</p>
                    </div>
                  </div>
                 {% endfor %}

                <!-- PAGINATION-->
                <nav aria-label="Page navigation example">
                  <ul class="pagination justify-content-center justify-content-lg-end">
                    <li class="page-item mx-1"><a class="page-link" href="#!" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                    <li class="page-item mx-1 active"><a class="page-link" href="#!">1</a></li>
                    <li class="page-item mx-1"><a class="page-link" href="#!">2</a></li>
                    <li class="page-item mx-1"><a class="page-link" href="#!">3</a></li>
                    <li class="page-item ms-1"><a class="page-link" href="#!" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                  </ul>
                </nav>

              </div>
            </div>
            </div>
          </div>
        </section>
      </div>
{% endblock %}
{% block footer %}
    <script src="{% static  '/vendor/bootstrap/js/bootstrap.bundle.js' %}"></script>
{% endblock %}
